<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
        title="注意：只允许为第三级分类设置相关参数"
        :closable="false"
        show-icon
        type="warning"
      >
      </el-alert>
      <el-row style="margin: 15px 0">
        <el-col>
          <span>选择商品分类</span>
          :
          <el-cascader
            v-model="value"
            expand-trigger="hover"
            :options="cateList"
            @change="handleChange"
            placeholder="下次再写"
          ></el-cascader>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="first"
          ><el-button disabled>动态参数</el-button></el-tab-pane
        >
        <el-tab-pane label="静态属性" name="second"
          ><el-button disabled>静态属性</el-button></el-tab-pane
        >
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cateList: [],
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      value: [],
      activeName: "first",
    };
  },
  created() {
    // this.getCateList();
  },
  methods: {
    // async getCateList() {
    //   let { data: res } = await this.$http.get("categories");
    //   let a = JSON.parse(JSON.stringify(res.data));
    //   let b = [];
    //   function f(arr) {
    //     let t = {};
    //     for (let i in arr) {
    //       t.value = arr[i].cat_id;
    //       t.name = arr[i].cat_name;
    //       if (arr[i].children) {
    //         t.children = [];
    //         f(arr[i].children);
    //       }
    //       b.push(t);
    //     }
    //   }
    //   f(a);
    //   console.log(b);
    //   this.cateList = a;
    // },
    handleChange() {},
    handleClick() {
      //  this.activeName=
    },
  },
};
</script>
<style lang="less" scope>
</style>